<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form id="loginForm">
      <div>
        <!-- 绑定 label 的 for 到 input 的 id -->
        <!-- 在点击 label 的时候，聚焦 focus 到 input -->
        <label for="username">用户名</label>
        <!-- 要想让 formdata 拿到数据，必须给 input 加上 name 属性 -->
        <input name="username" placeholder="请输入用户名" id="username" />
      </div>
      <div>
        <label for="password">密码</label>
        <input name="password" placeholder="请输入密码" id="password" />
      </div>
      <button type="submit">登录</button>
    </form>
    <script>
      // 我们可以用 FormData 去获取表单项的值
      // 一次性取出表单项的值

      // submit preventDefault
      const loginForm = document.querySelector("#loginForm");
      loginForm.onsubmit = (e) => {
        console.log("submit");
        // 我们要发异步请求，不能让浏览器跳转
        e.preventDefault();
        const formData = new FormData(loginForm);

        // fetch 第一个参数 url
        // fetch 配置
        // 方法 GET/POST
        // content-type
        // 要传的数据 body
        // fetch 一调用 就是 send
        // fetch 之后，两段 then
        // fetch().then().then()
        // 等待一段时间后
        // 更多使用 fetch
        const config = {
          method: "POST",
          headers: {
            "content-type": "application/json",
          },
          body: JSON.stringify({
            username: formData.get("username"),
            password: formData.get("password"),
          }),
          // 结果的获取，直接调用函数
        };
        fetch(
          "http://ajax-api.itheima.net/api/logi",
          // 固定死的
          config
          //  {
          //   method: "POST",
          //   headers: {
          //     "content-type": "application/json",
          //   },
          //   body: JSON.stringify({
          //     username: formData.get("username"),
          //     password: formData.get("password"),
          //   }),
          //   // 结果的获取，直接调用函数
          // }
        )
          // 函数可以当参数传递
          // result=>{} 可以传递给 fetch() 返回对象的 then 方法
          // fetch 在请求返回之后，调用我们的函数
          // fetch 发出请求以后，一段时间后（then），我们可以通过函数，获取到请求结果
          // 第一段 then 的返回值，是第二段 then 的参数
          // 所有 .catch 之前的 then 回调里的错误，都会被 .catch 捕获
          .then((result) => {
            // 作用相当于 JSON.parse()
            // status 是在 第一段 then
            if (result.status !== 200) {
              throw new Error("错啦");
            }
            return result.json();
          })
          .then((result) => {
            alert("成功");
          })
          // 代码里面，不需要 try catch 了
          .catch((err) => {
            console.log(err);
            alert("失败");
          });
        // const xhr = new XMLHttpRequest();
        // xhr.open("POST", "http://ajax-api.itheima.net/api/login");
        // // 因为我们发送的是 post 请求，需要约定请求数据类型
        // xhr.setRequestHeader("content-type", "application/json");
        // // 如何获取表单的数据
        // // FormData
        // const formData = new FormData(loginForm);
        // // 发送 json 数据
        // // admin 和 123456 返回 status 200，其余返回 status 500
        // xhr.send(
        //   JSON.stringify({
        //     username: formData.get("username"),
        //     password: formData.get("password"),
        //   })
        // );
        // // 监听结果
        // xhr.onload = () => {
        //   alert("成功");
        // };
        // xhr.onreadystatechange = () => {
        //   if (xhr.readyState === 4) {
        //     if (xhr.status === 200) {
        //       // 登录成功
        //       alert("登录成功");
        //     } else {
        //       // 登录失败
        //       alert("登录失败");
        //     }
        //   }
        // };
      };
    </script>
  </body>
</html>
